<!-- CharacterStatus.vue -->
<template>
  <div class="character-status">
    <div class="character-image">
      <!-- 这里放置角色图像 -->
      <!-- <img :src="characterImageUrl" alt="Character Image"> -->
    </div>
    <div class="status-bars">
      <div class="bar-container">
        <div class="red-bar" :style="{ width: redPercent + '%' }"></div>
        <div class="value-container">
          <span class="value">{{ redValue.current }} / {{ redValue.max }}</span>
        </div>
      </div>
      <div class="bar-container">
        <div class="blue-bar" :style="{ width: bluePercent + '%' }"></div>
        <div class="value-container">
          <span class="value">{{ blueValue.current }} / {{ blueValue.max }}</span>
        </div>
      </div>
    </div>
  </div>
  <div>
    <button @click="decreaseRedValue">减少</button>
    <button @click="increaseRedValue">增加</button>
  </div>
</template>

<script setup>
import { reactive, computed, ref } from 'vue';

const redValue = reactive({ current: 85, max: 100 });
const blueValue = reactive({ current: 70, max: 100 });

const redPercent = computed(() => (redValue.current / redValue.max) * 100);
const bluePercent = computed(() => (blueValue.current / blueValue.max) * 100);

// 如果有角色图像的话，可以传入图像地址
// const characterImageUrl = '/path/to/character.png';
const decreaseRedValue = () => {
  const decreaseAmount = Math.floor(Math.random() * 16) + 5; // 随机数范围为5到20
  // alert('decrease' + decreaseAmount);
  redValue.current = Math.max(0, redValue.current - decreaseAmount);
};

const increaseRedValue = () => {
  if (blueValue.current >= 5) {
    const increaseAmount = Math.floor(Math.random() * 11) + 10; // 随机数范围为10到15
    const newRedValue = Math.min(redValue.max, redValue.current + increaseAmount);
    const newBlueValue = blueValue.current - 5;

    redValue.current = newRedValue;
    blueValue.current = newBlueValue;
  }
};
</script>

<style scoped>
.character-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 150px;
  /* 设置最小宽度 */
  min-height: 180px;
  /* 设置最小高度 */
  border: 1px solid #ccc;
  /* 边框样式 */
  padding: 10px;
  /* 内边距 */
}

.character-image {
  /* 样式你的角色图像 */
  background-image: url('../assets/image.png');
  width: 120px;
  height: 120px;
  background-size: cover;
  background-position: center;
  margin-bottom: 20px;
}

.status-bars {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.bar-container {
  display: inline-block;
  align-items: center;
  /* 垂直居中对齐 */
  position: relative;
  /* 使伪元素定位相对于.bar-container */
}

.red-bar,
.blue-bar {
  height: 20px;
  margin-bottom: 5px;
  text-align: center;
  color: white;
  border: 1px solid #ccc;
  /* 边框样式 */
  position: relative;
  /* 添加这一行以使伪元素相对于其定位 */
  overflow: hidden;
  /* 隐藏超出的部分 */
}

.red-bar {
  background-color: red;
}

.blue-bar {
  background-color: blue;
}

.red-bar::before,
.blue-bar::before {
  content: "";
  /* 必须有content属性 */
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% - 2px);
  /* 减去边框的宽度，使得内层的进度条和边框对齐 */
  height: calc(100% - 2px);
  border: 1px solid #ccc;
  /* 边框样式 */
  z-index: -1;
  /* 确保边框在背景颜色之下 */
}

.value {
  margin-left: 5px;
  /* 或者你喜欢的任何间距 */
  line-height: 20px;
  /* 与.bar的高度一致，确保垂直居中 */
}

.value-container {
  position: absolute;
  right: 0; /* 将数值显示区定位在容器的右侧 */
  top: 0; /* 可以根据需要调整垂直位置 */
  display: flex;
  align-items: center; /* 垂直居中 */
}
</style>